<template>
    <div id="app">
        <div class="commenNav">
            <div class="stockNav" @click='backStockList'>
                <div class="outStockIcon"></div>
                <div>出库管理</div>
            </div>
            <div class="buttonBox" v-show='this.$store.state.leaveStorage.isButtonBox'><button @click='toOutStockFileUpload'>出库文件上传</button></div>
            <div class="catalogBox" v-show='this.$store.state.leaveStorage.catalogBox'>
                <ul>
                    <li v-for='(item,index) in this.$store.state.leaveStorage.catalog'>
                        <span class="catalogIcon"></span><span class="catalogClass">{{item.label}}</span>
                    </li>
                </ul>
            </div>
            <div class="searchBox" v-show='this.$store.state.leaveStorage.isSearchBox'>
               <span class="txt1">筛选查找:</span>
                <div class="startDate">
                    <el-date-picker v-model="startDate"type="date":editable='false'></el-date-picker>
                </div>
                <span class="txt2">至</span>
                <div class="endDate">
                    <el-date-picker v-model="endDate"type="date":editable='false'></el-date-picker>
                </div>
                <button class="searchButton" @click='search'>搜索</button>
            </div>
        </div>
        <component v-bind:is='this.$store.state.leaveStorage.whichComponents' keep-alive></component>
    </div>
</template>
<script>
    import {
        mapActions
    } from 'vuex'
    import outStockList from './outStockList.vue'
    import outStockRecord from './outStockRecord.vue'
    export default {
        data() {
            return {
                startDate:'',
                endDate:'',
                isBackList:false,
                pickerOptions: {
                  disabledDate(time) {
                    return time.getTime() > Date.now();
                  }
                },
            }
        },
        created: function() {

        },
        methods: {
            // 搜索
            search:function(){
                let list = {
                    jsonFilter:{}
                };
                if(this.startDate!=''&&this.endDate!=''&&this.startDate!=undefined&&this.endDate!=undefined){
                    let start = Date.parse(new Date(this.startDate)),
                        end = Date.parse(new Date(this.endDate));
                    if(start <= end){
                        list.jsonFilter.GTE_leaveWarehouseDate_DATE = this.UnFormatDate(this.startDate)+' 00:00:00';
                        list.jsonFilter.LTE_leaveWarehouseDate_DATE = this.UnFormatDate(this.endDate)+' 23:59:59';
                        list.jsonFilter = JSON.stringify(list.jsonFilter);
                        this.$root.eventHub.$emit('outStockListSearch',list);
                    }
                }
            },
            // 回到主组件:出库列表
            backStockList:function(){
                this.isBackList = true;
                this.$store.commit('backOutStockList');
            },
            // 出库文件上传组件
            toOutStockFileUpload:function(){
                this.$router.push({
                    path: '/home/outStockFileUpload'
                })
            },
            // 请求格式化日期
            UnFormatDate(date) {
                let y,m,d,
                    t = new Date(date);
                y = t.getFullYear();
                m = t.getMonth() + 1;
                d = t.getDate();
                return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d);
            },
            ...mapActions([''])
        },
        components: {
            'outStockList': outStockList,
            'outStockRecord':outStockRecord,
        },
        beforeDestroy: function() {
            this.backStockList();
        }
    }

</script>
<style scoped>
    .commenNav{
        display: inherit; 
    }
    .stockNav{
        cursor: pointer;
        width: 132px;
        height: 50px;
        line-height: 50px;
        padding-left: 38px;
        float: left;
    }
    .buttonBox{
        float: left;
        margin: 10px 0 10px 50px;
    }
    .filterBox{
        margin: 0 0 0 80px;
        float: right;
    }
    .buttonBox button{
        border: none;
        background-color: #43DCE7;
        color: #fff;
        border-radius: 5px;
        padding: 5px 10px;
    }
    .startDate,.endDate,.txt1,.txt2{
        float: left;
    }
    .startDate,.endDate{
        height: 32px;
        overflow: hidden;
        margin: 9px 0;
        position: relative;
        border: 1px solid #dddddd;
        box-sizing: border-box;
        border-radius: 5px;
        width: 148px;
    }
    .el-input{
        top: -2px;
        left: -1px;
    }
    .el-date-editor.el-input{
        width: 150px;
    }
    .txt1,.txt2{
        height: 50px;
        line-height: 50px;
    }
    .txt1{
        margin: 0 30px 0 0;
    }
    .txt2{
        margin: 0 10px;
    }
    .searchBox{
        height: 50px;
        font-size: 14px;
        color: #333333;
        float: right;
    }
    .searchButtonBox input{
        height: 30px;
        margin: 10px 0;
        line-height: 30px;
        border-radius: 5px;
        padding-left: 5px;
        width: 298px;
        float: left;
        border: 1px solid #dddddd;
        box-sizing: border-box;
        border-radius: 5px;
    }
    .outStockIcon{
        width: 24px;
        height: 24px;
        margin: 13px 10px 13px 0;
        overflow: hidden;
        float: left;
    }
    .catalogBox{
        float: left;
        height: 50px;
        line-height: 50px;
    }
    ul{
        margin: 0;
        padding: 0;
    }
    li{
        float: left;
    }
    .catalogClass{
        cursor: pointer;
    }
    .searchButton{
        border: none;
        background-color: #43DCE7;
        color: #fff;
        border-radius: 5px;
        padding: 5px 20px;
        margin: 10px 40px 10px 20px;
        float: right;
    }
    .searchButtonBox{
        float: right;
    }
</style>
